import React, { FC, useRef, useState } from 'react'
import type { ActionType, ProColumns } from '@ant-design/pro-table'
import ProTable from '@ant-design/pro-table'
import { Popconfirm, Button, message } from 'antd'
import { ModelFormModeEnum } from '@/enums/ModelFormModeEnum'

import './index.scss'
import { deleteMenu, listMenu } from '@/api/auth/menu'
import MenuForm from '@/views/auth/menu/components/MenuForm'
import { MenuTreeDTO } from '@/model/auth/MenuTreeDTO'

const Menu: FC = () => {
  const actionRef = useRef<ActionType>()

  // 事件
  const menuRemoveOnConfirm = async (record: MenuTreeDTO) => {
    await deleteMenu(record.id)
    message.success(`已删除 ${record.name}`)
    await actionRef.current.reload()
  }

  // 表格列
  const columns: ProColumns<MenuTreeDTO>[] = [
    {
      title: 'code',
      dataIndex: 'code',
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '路径',
      dataIndex: 'path',
      search: false,
    },
    {
      title: '是否菜单',
      dataIndex: 'isMenu',
      search: false,
      valueEnum: {
        1: {
          text: '是',
        },
        2: {
          text: '不是',
        },
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      search: false,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      valueType: 'dateTimeRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            createTimeStart: value[0],
            createTimeEnd: value[1],
          }
        },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record) => [
        <MenuForm
          mode={ModelFormModeEnum.update}
          row={record}
          actionRef={actionRef}
          key={record.id}
          allMenu={dataSource}
        />,
        <Popconfirm
          title="确认删除吗?"
          okText="是"
          cancelText="否"
          onConfirm={() => { menuRemoveOnConfirm(record) }} // 点击确认的回调
          key={record.id}
        >
          <Button type="link">删除</Button>
        </Popconfirm>,
      ],
    },
  ]

  const [dataSource, setDataSource] = useState<Array<MenuTreeDTO>>([])

  return (
    <div className="menus">
      <ProTable<MenuTreeDTO>
        columns={columns}
        actionRef={actionRef}
        request={async (params = {}) => {
          const data = await listMenu(params)
          setDataSource(data)
          return {
            data,
            success: true,
            total: 0,
          }
        }}
        columnsState={{
          persistenceKey: 'pro-table-menus',
          persistenceType: 'localStorage',
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        pagination={false}
        dateFormatter="string"
        headerTitle="菜单"
        toolBarRender={() => [
          <MenuForm mode={ModelFormModeEnum.add} actionRef={actionRef} allMenu={dataSource} />,
        ]}
      />
    </div>
  )
}

export default Menu
